<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title></title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type='text/javascript' src='js/common.js'></script>
    <link rel="stylesheet" href="css/viewport.css">
    <style>
        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 5px 20px;
            border-radius: 10px;
            border: 1px solid #ff0000;
            /* 红色边框 */
            color: #ff0000;
            /* 红色文字 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="login_main">
        <div class="content">
            <div class="logo"><img src="images/logo.jpg" alt=""></div>
            <div class="form">
                <div class="label">
                    <input class="account" type="text" placeholder="请输入账号">
                </div>
                <div class="label">
                    <input type="text" class="password" type="password" placeholder="请输入密码">
                </div>
                <!-- <div class="label label1">
                    <input type="text" class="code" placeholder="请输入验证码">
                    <span class="hqyzm">获取验证码</span>
                </div> -->
                <div class="btn"><span>登陆</span></div>
            </div>
        </div>
        <div id="popup" class="popup">请输入用户账号</div>
    </div>

</body>

<script>
    $(function () {
        $('.tab_box span').on('click', function () {
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.list_box').hide();
            $('.list_box' + index).show();
        });
        $('.search_box button').click('click', function () {
            $('.search_data').addClass('active');
        })
        $('.login_main .btn').on('click', function () {
            var accountValue = document.querySelector('.account').value;
            if (accountValue.trim() === '') {
                var popup = document.getElementById('popup');
                popup.style.display = 'block';

                // 设置定时器，在1.5秒后关闭弹窗
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 1500);

            } else {
                location.href = "index.html";
            }
        });
    })
</script>

</html>